import {Route, Routes, Outlet} from "react-router-dom"; // 引入 Outlet
import ConsoleRoutes from "../../../routes/consoleRoutes";

/**
 * 递归渲染路由（支持嵌套路由）
 */
const renderRoutes = (routes) => {
    return routes.map((item) => (
        <Route
            key={item.path}
            path={item.path}
            element={item.element || <Outlet />} // 父路由默认用 Outlet 作为出口
        >
            {/* 如果有子路由，递归渲染子路由 */}
            {item.children && item.children.length > 0 && renderRoutes(item.children)}
        </Route>
    ));
};

const AppContent = () => {
    return (
        <div style={{
            height: "calc(100% - 48px)",
            overflowY: "auto",
            overflowX: "hidden",
            backgroundColor: "white",
            borderRadius: "12px",
            padding: "6px 24px",
            boxShadow: "0 2px 12px rgba(0, 0, 0, 0.06)",
            transition: "box-shadow 0.3s ease"
        }}>
            {/* 滚动条美化 */}
            <style jsx global>{`
                div::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }
                div::-webkit-scrollbar-track {
                    background: #f5f5f5;
                    border-radius: 3px;
                }
                div::-webkit-scrollbar-thumb {
                    background: #d9d9d9;
                    border-radius: 3px;
                }
                div::-webkit-scrollbar-thumb:hover {
                    background: #b3b3b3;
                }
            `}</style>

            <Routes>
                {/* 调用递归函数渲染所有路由（包括嵌套子路由） */}
                {renderRoutes(ConsoleRoutes)}
            </Routes>
        </div>
    )
}

export default AppContent;